<template>
    <div class="container">
        <van-nav-bar
            title="招商商机"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            :class="hidden == true? 'on':''"
        />
        <!-- 列表 -->
        <div class="list">
            <van-steps direction="vertical" active-color="#969799">
                <van-step v-for="item in noticeList" :key="item.createTime">
                    <h3 class="notice-title">{{item.participateBrandComment}}</h3>
                    <div class="file-list" v-if="item.attachments.length>0">
                        <div class="file-list-title">附件：</div>
                        <div class="list-item" @click="saveItem(file)" v-for="file in item.attachments" :key="file">
                            <i>{{file.slice(file.lastIndexOf("/") +9).toLowerCase()}}</i>
                        </div>
                    </div>
                    <p class="time">{{item.creatorName}}提交于{{item.createTime|dateformat}}</p>
                </van-step>
            </van-steps>
        </div>
        <!-- btn -->
        <div class="foot">
            <van-button type="info" @click="show = true">新增跟进记录</van-button>
        </div>
        <van-action-sheet v-model="show" title="新增跟进日志">
            <div class="content">
                <div class="title">备注</div>
                <div class="input-area">
                    <van-field
                        v-model="queryByAdd.attractInvestmentComment"
                        rows="3"
                        autosize
                        border
                        type="textarea"
                        maxlength="100"
                        placeholder="请输入留言"
                        show-word-limit
                    />
                </div>
                <!-- 上传按钮 -->
                <van-uploader 
                :before-read="beforeRead" 
                :after-read="afterRead"
                :max-size="isOverSize"
                @oversize="oversize"
                v-model="fileList"
                accept=".pdf, .doc, .docx, .xls, .xlsx , .ppt , .txt">
                    <van-button icon="plus" type="info">上传文件</van-button>
                </van-uploader>
                <div class="notice">只能上传.pdf, .doc, .docx, .xls, .xlsx , .ppt , .txt文件，且大小不超过5M</div>
                <!-- 文件列表 -->
                <div class="file-list" v-if="fileArry.length>0">
                    <div class="file-item" v-for="(item,index) in fileArry" :key="index">
                        <div class="wrap">
                            <div class="file-icon">
                                <van-icon name="description" />
                            </div>
                            <div class="file-url" @click="saveItem(item.url)">
                                <i class="url">{{item.name}}</i>
                            </div>
                        </div>
                        <div class="file-select" @click="deleteItem(item.name)">
                            <van-icon name="clear" />
                        </div>
                    </div>
                </div>
                <div class="submit" @click="submit">
                    <van-button type="info">保存</van-button>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
import {NOTICE_LIST,UPDATE_NOTICE,upload} from "@/api/brand/invite"
export default {
    data(){
        return{
            dailyTaskId:null,
            noticeList:[],
            show:false,
            // 新增日志
            queryByAdd: {
                attachments: [],
                attractInvestmentComment: ""
            },
            // 限制文件大小 5 M
            isOverSize:5 * 1024 *1024,
            fileList:[],
            fileArry:[]
        }
    },
    computed:{
        // 上传图片的接口地址（生产环境跟开发环境不一样）
        FILE_UPLOAD_URL() {
            let protocol = window.location.protocol;
            let host = window.location.host;
            if (protocol && host) {
                return protocol + "//" + host + process.env.VUE_APP_BASE_API_STRING_ONLY + process.env
                .VUE_APP_FILE_UPLOAD_URL;
            }
        },
    },
    created(){
        console.log(this.$route.query)
        this.dailyTaskId = this.$route.query.id
        this.loadData()
    },
    methods:{
        async loadData(){
            const res = await NOTICE_LIST(this.dailyTaskId)
            console.log(res)
            this.noticeList = res
        },
        // onClickLeft(){
        //     this.$router.go(-1)
        // },
        // 文件上传前的回调
        beforeRead(file) {
            console.log(file.name)
            // console.log(file.name.indexOf("docx" || "doc" || "pdf" || "xls" || "xlsx" || "ppt" || "txt"))
            // if (file.type.indexOf("pdf" || "doc" ||"docx" || "xls" || "xlsx" || "ppt" || "txt") == -1) {
            //     return false;
            // }
            return true;
        },
        // 文件上传成功的回调
        async afterRead(fileObj){
            this.$toast.loading({message: "上传中"})
            console.log(fileObj)
            let uploadFormData = new FormData();
            uploadFormData.append('file',fileObj.file)
            const res = await upload(this.FILE_UPLOAD_URL,uploadFormData,{"Content-Type": "multipart/form-data"})
            console.log(res)
            const Arry = [res]
            this.queryByAdd.attachments.push(res.filePath)
            Arry.map(item =>{
                item = {name:item.filePath.slice(item.filePath.lastIndexOf("/") +9).toLowerCase(),url:item.filePath}
                this.fileArry.push(item)
                return item
            })
            this.$toast.success("上传成功")
            this.$toast.clear();
            console.log(this.fileArry)
            // console.log(Arry)
            // this.fileList = Arry
        },
        // 文件大小超出限制的回调
        oversize(){
            this.$toast("文件大小不能超过5M")
        },
        // 下载文件
        saveItem(url){
            window.open(url);
        },
        // 删除文件
        deleteItem(name){
            console.log(name)
            var index = this.fileArry.findIndex((item)=>item.name == name)
            console.log(index)
            if(index !=-1){
                this.fileArry.splice(index,1)
            }
        },
        // 保存日志
        submit(){
            UPDATE_NOTICE(this.queryByAdd,this.dailyTaskId).then(res=>{
                console.log(res)
                if(res){
                    this.$toast.success("保存成功")
                    this.show = false
                    this.$router.go(0)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
/deep/.van-step__icon {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #969799;
    border-radius: 50%;
}
/deep/.van-step__circle{
    width: 8px;
    height: 8px;
}
/deep/ .van-icon-checked::before{
    display: none;
}
.list{
    padding: 0 0.3rem;
    padding-bottom: 2rem;
    p{
        margin-top: 0.3rem;
    }
}
/deep/ .van-steps{
    overflow: inherit;
}
/deep/ .van-step{
    box-shadow: 0 0 5px 1px rgb(226, 226, 226);
    margin-top: 0.3rem;
    padding-left: 0.3rem;
    h3{
        margin-bottom: 0.3rem;
    }
}
.foot{
    position: fixed;
    bottom: 0.2rem;
    left: 0;
    width: 100%;
    padding: 0 0.3rem;
    z-index: 99;
    /deep/.van-button{
        height: 35px;
        border-radius: 5px;
        width: 100%;
    }
}
.content {
    padding: 16px 16px 160px;
    .notice{
        margin-top: 0.15rem;
    }
    .submit{
        position: absolute;
        padding: 0 0.2rem;
        width: 100%;
        left: 0;
        bottom: 0.2rem;
        button{
            width: 100%;
            height: 35px;
            border-radius: 5px;
        }
    }
}
.input-area{
    margin-top: 0.25rem;
    /deep/ .van-cell{
        padding: 0;
    }
    /deep/ .van-button--normal{
        padding: 0 10px;
    }
    /deep/ .van-button{
        height: 35px;
    }
}
/deep/.van-field__control{
    border: 1px solid #ddd;
    height: 60px;
    text-indent: 10px;
}
/deep/.van-uploader__preview{
    display: none;
}
.notice-title{
    color: #000;
}
// 文件列表
.file-list{

    .file-item{
        display: flex;
        align-items: center;
        margin-top: 0.2rem;
        justify-content: space-around;
        .wrap{
            display: flex;
            flex: 10;
            .file-icon{
                padding-right: 0.1rem;
            }
        }
        .file-select{
            flex: 2;
        }
        .van-icon{
            font-size: 0.36rem;
        }
        .url{
            color: #1989fa;
        }
    }
    .list-item{
        color: #1989fa;
        margin-top: 0.15rem;
        text-decoration: underline;
    }
    .file-list-title{
        color: #000;
    }
}
</style>